<template>
  <div>
    <div class="p-30">
      <el-form label-width="90px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="查询">
              <el-input v-model="eventSearchDto.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label-width="0px">
              <el-select style="width:100%" placeholder="请选择" v-model="eventSearchDto.titleType">
                <el-option v-for="(item,index) in initView.searchTitleType" :key="index" :value="item.dictValue" :label="item.dictName"></el-option>                
              </el-select>
            </el-form-item>
          </el-col>  
          <el-col :span="8">
            <el-form-item label="发布时间">
              <el-date-picker
                class="w-100"
                v-model="eventSearchDto.startTime"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="7" :offset="1" class="pull-right align-right">
            <el-button type="primary" @click="getList(1)" round>搜索</el-button>
            <el-button type="primary" @click="toAdd('-1')" round>添加</el-button>
            <el-button type="primary" @click="del" round>删除</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="上市类型" label-width="90px">
              <el-select style="width:100%" placeholder="请选择" v-model="eventSearchDto.ipoType">
                <el-option v-for="(item,index) in initView.ipoType" :key="index" :value="item.dictValue" :label="item.dictName"></el-option>                
              </el-select>
            </el-form-item>
          </el-col> 
          <el-col :span="8">
            <el-form-item label="信息状态" label-width="90px">
              <el-select style="width:100%" placeholder="请选择" multiple v-model="infoStatusList">
                <el-option v-for="(item,index) in initView.infoStatus" :key="index" :value="item.dictValue" :label="item.dictName"></el-option>
              </el-select>
            </el-form-item>
          </el-col> 
          <el-col :span="8">
            <el-form-item label="质检状态" label-width="90px">
              <el-select style="width:100%" placeholder="请选择" multiple v-model="qualityStatusList">
                <el-option v-for="(item,index) in initView.qualityStatus" :key="index" :value="item.dictValue" :label="item.dictName"></el-option>                
              </el-select>
            </el-form-item>
          </el-col> 
        </el-row>
        <el-row>
          <h4>
            <span class="redPass">已选中（{{selected}}）个</span>&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="m-r-15 ca-info-color">已编辑信息：{{eventCountInfoVo.imperfectCount||0}}条&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="m-r-15 ca-info-color">已发布信息：{{eventCountInfoVo.publishCount||0}}条&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="ca-info-color-red">质检未通过信息：{{eventCountInfoVo.qualityCount||0}}条</span>
          </h4>
        </el-row>
      </el-form>
    </div>
    <el-table stripe :data="pageResult.resultData" @selection-change="selectionChange" class="m-t-20" text-align="center">
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="标题" prop="title"></el-table-column>
      <el-table-column label="上市类型" prop="ipoType">
        <template slot-scope="scope">
            {{scope.row.ipoType | getDicNameById('ipoType')}}
        </template>
      </el-table-column>
      <el-table-column label="发布时间" prop="publishTime" sortable="column">
        <template slot-scope="scope">
          <p>{{scope.row.publishTime | cmsMoment}}</p>
          <p>{{scope.row.publishName}}</p>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" prop="modifyTime" sortable="column">
        <template slot-scope="scope">
          <p>{{scope.row.modifyTime | cmsMoment}}</p>
          <p>{{scope.row.modifyName}}</p>
        </template>
      </el-table-column>
      <el-table-column label="信息状态" prop="infoStatus">
        <template slot-scope="scope">
          <span type="text" :class="scope.row.infoStateColor">
            {{scope.row.infoStatus | getDicNameById('infoStatus')}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="质检状态" prop="qualityStatus">
        <template slot-scope="scope">
          <span type="text" :class="scope.row.qualityStatusColor">
            {{scope.row.qualityStatus | getDicNameById('qualityStatus')}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="toAdd(scope.row.id)">编辑</el-button>
          <el-button type="text" @click="toOperateHistory(scope.row.id, scope.row.title)">信息详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="align-center m-t-20">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pageParam.pageIndex"
        :page-size="50"
        layout="total, prev, pager, next, jumper"
        :total="pageResult.totalCount">
      </el-pagination>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import { PageResult, EventDelDto, EventVo, PageParam } from '../../../api/Interface';
import { EventSearchDto } from '../../../service/event/Interface';
import ServiceEvent from '../../../service/event/index';
import { getParamsForList, setParamsForList } from '../../../libs/utils';
@Component({
  components: { }
})
export default class NewIssue extends Vue {
  // 初始化数据 相当于data
  public selected: number = 0;
  public pageParam: PageParam = {pageIndex: 1, pageSize: 50} as PageParam;
  public qualityStatusList: Array<string> = [];
  public infoStatusList: Array<string> = [];
  public eventCountInfoVo: object = {}; // 统计数据
  public pageResult: PageResult = {} as PageResult; // 列表数据
  public eventSearchDto: EventSearchDto = {} as EventSearchDto;
  public eventDelDto: EventDelDto = {} as EventDelDto; // 多选框选择id列表
  public infoStateColor = {
    //信息状态颜色
    '1010': 'ca-info-color__gray',
    '0100': 'ca-info-color__blue',
    '0000': 'ca-info-color__light-blue',
    '1111': 'ca-info-color__orange',
    '0010': 'ca-info-color__purple',
  };
  public qualityStatusColor = {
    //质检状态颜色
    1: 'ca-quality-color__white',
    2: 'ca-quality-color__green',
    3: 'ca-quality-color__red'
  };
  public initView = {
    infoStatus: this.$store.state.user.dictionary.dicList.infoStatus,
    ipoType: [{dictValue: '', dictName: '全部'}, ...this.$store.state.user.dictionary.dicList.ipoType],
    qualityStatus: this.$store.state.user.dictionary.dicList.qualityStatus,
    searchTitleType: this.$store.state.user.dictionary.dicList.searchTitleType
  }; // 下拉数据

  // 生命周期钩子
  public mounted() {
    // 获取local中存储的搜索条件
    const routerName = this.$root.$route.name;
    const localParams = getParamsForList(routerName);
    this.eventSearchDto = Object.assign({}, this.eventSearchDto, localParams.searchParams);
    this.pageParam = Object.assign({}, this.pageParam, localParams.pageParam);
    this.infoStatusList = localParams.infoStatusList ? localParams.infoStatusList : [];
    this.qualityStatusList = localParams.qualityStatusList ? localParams.qualityStatusList : [];
    // 获取local中存储的搜索条件 end
    this.getCountInfo();
    this.getList();
  }
  // 多选框发生变化
  public selectionChange(selection: object[]) {
    this.eventDelDto.eventIds = [];
    selection.map((item: EventVo) => {
      this.eventDelDto.eventIds.push(item.id);
    });
    this.selected = selection.length;
  }
  // 删除选择数据
  public del() {
    this.$confirm('是否删除选中数据?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      this.delEventByIds();
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消删除'
      });          
    });
  }
  public async delEventByIds() {
    const { resCode } = await ServiceEvent.delEventById(this.eventDelDto);
    if (resCode === '0') {
      this.$message.success('删除成功！');
      this.getList();
    }
  }
  // 跳转到操作历史
  public toOperateHistory(id: number, title: string) {
      this.$router.push({ name: 'operation-history', params: { businessName: 'new-issue', businessId: id.toString(), businessType: '2', title: encodeURIComponent(title) }});
  }
  // 获取事件主列表上方的总数统计（待完善信息/已发布信息/质检未通过信息）
  public async getCountInfo() {
    const data = await ServiceEvent.getEventCountInfo(16);
      this.eventCountInfoVo = data;
  }
  // 获取事件列表
  public async getList() {
    this.eventSearchDto['pageParam.pageIndex'] = this.pageParam.pageIndex;
    this.eventSearchDto['pageParam.pageSize'] = this.pageParam.pageSize;
    this.eventSearchDto.eventType = 16;
    if (this.qualityStatusList.length) {
        this.eventSearchDto.qualityStatus = this.qualityStatusList.join(',');
    } else {
      delete this.eventSearchDto.qualityStatus;
    }
    if (this.infoStatusList.length) {
        this.eventSearchDto.infoStatus = this.infoStatusList.join(',');
    } else {
      delete this.eventSearchDto.infoStatus;
    }
    // local中存当前搜索条件 
    const params = {
      pageParam: this.pageParam,
      searchParams: this.eventSearchDto,
      infoStatusList: this.infoStatusList,
      qualityStatusList: this.qualityStatusList
    };
    const routerName = this.$root.$route.name;
    setParamsForList(params, routerName);
    // local中存当前搜索条件 end
    const data = await ServiceEvent.getEventPage(this.eventSearchDto);
    this.pageResult = data.data;
    this.pageResult.resultData.map(val => {
      // 列表信息状态颜色
      val.infoStateColor = this.infoStateColor[val.infoStatus];
      // 列表质检状态颜色
      val.qualityStatusColor = this.qualityStatusColor[val.qualityStatus];
    });
  }
  // 进入 添加/详情 页
  public toAdd(eventId: string) {
    this.$router.push({ name: 'new-issue-detail', params: { eventId, tabIndex: '0'}});
  }
  // 换页
  public handleCurrentChange(val: number) {
    this.pageParam.pageIndex = val;
    this.getList();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .noPass {
    color: #f00;
  }
  .redPass {
    color: #245787
  }
  .w-100 {
    width: 100%;
  }
  .align-center-self {
    text-align: center;
    line-height: 40px;
  }
</style>
